<template>
  <div class="app-container">
    <el-tabs v-model="activeFinish" @tab-click="handleFinishClick">
      <el-tab-pane label="进行中" name="first"></el-tab-pane>
      <el-tab-pane label="已结束" name="second"></el-tab-pane>
    </el-tabs>

    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input
            v-model="queryParams.projectName"
            placeholder="请输入项目名称"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目编号" prop="projectId">
        <el-input
            v-model="queryParams.code"
            placeholder="请输入项目编号"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="projectList">
<!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="项目编号" align="center" width="200" prop="code" />
      <el-table-column label="项目名称" align="center" width="250" >
        <template #default="scope">
          <el-button link type="primary" @click="showExperiment(scope.row.projectId)">{{scope.row.projectName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="项目负责人" align="center" prop="projectLeader" width="150"/>
      <el-table-column label="项目回款情况" align="center" width="500">
        <template #default="scope">
          <div>
            <el-row>
              <el-col :span="2"></el-col>
              <el-col :span="6">
                <el-button @click="showPayment(scope.row.pay,scope.row.projectId,scope.row.finishPrice)"  type="info" plain style="top: 15%;position: absolute;right: 70%">详情</el-button>
              </el-col>
              <el-col :span="6">
                <div style="position: absolute;top:8%;bottom: 10%;background-color: #eae7e7;padding: 5px 15px;display: flex;justify-content: center;align-items: center;">
                  <span v-if="scope.row.finishPrice==0" style="font-size: 16px;">{{scope.row.hasPayCount==0?'未到账':'已支付'+scope.row.hasPayCount+'期'}}</span>
                  <span v-else style="font-size: 16px;">已全部到账</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <div style="background-color: #1ab394;height: 80%;margin-bottom: 3px;color: white;font-weight: 600">已到账{{scope.row.hasPay/100}}元</div>
                  <div style="background-color: deepskyblue;height: 80%;color: white;font-weight: 600">未到账{{scope.row.unPay/100}}元</div>
                </div>
              </el-col>
              <el-col :span="2">
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="岗位结算情况" align="center" width="120">
        <template #default="scope">
          <el-button @click="showDetail(scope.row.projectId)"  type="info" plain>详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="财务结算情况" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.type === true" class="ml-2" type="success">已结束</el-tag>
          <el-tag v-if="scope.row.type === false" class="ml-2" type="danger">进行中</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <el-dialog :title="title" v-model="open" @open="() => fFinish=true" @closed="() => fFinish=false" width="1000px" append-to-body style="border-radius: 20px">
      <el-switch
          v-model="isFinishPrice"
          @change="handleFinish"
          class="mb-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="已全部到账"
          :active-value="1"
          inactive-text="未全部到账"
          :inactive-value="0"
      />
      <el-table :data="paymentList">
        <el-table-column fixed label="期数" align="center" prop="num" width="100"/>
        <el-table-column label="日期" align="center" prop="paymentDate" width="150">
          <template #default="scope">
            <span>{{ parseTime(scope.row.paymentDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center" prop="paymentPrice" width="100">
          <template #default="scope">
            {{scope.row.paymentPrice/100}}
          </template>
        </el-table-column>
        <el-table-column label="到账日期" align="center" prop="getDate" width="150">
          <template #default="scope">
            <span>{{ parseTime(scope.row.getDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际到账金额" align="center" prop="paymentPrice" width="120">
          <template #default="scope">
            {{scope.row.accountPrice/100}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="paymentPrice" width="200">
          <template #default="scope">
            {{scope.row.remark}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template #default="scope">
            <el-button type="success" @click="openGetPrice(scope.row.paymentId)">到账</el-button>
            <el-button type="danger" @click="handleBack(scope.row.paymentId)" >撤回</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="提醒" width="200">
          <template #default="scope">
            <div v-if="scope.row.getDate==null">
              <span v-if="scope.row.paymentDate.getTime()+86400000>=new Date().getTime()" >
                距约定日期还有{{parseInt((scope.row.paymentDate.getTime()-new Date().getTime())/86400000)}}天
              </span>
              <span v-else style="color: red">
                已逾期{{parseInt((new Date().getTime()-scope.row.paymentDate.getTime())/86400000)}}天
              </span>
            </div>
            <div v-else>
              <span v-if="scope.row.getDate.getTime()<=scope.row.paymentDate.getTime()" style="color: #2b8500">
                已准时到账
              </span>
              <span v-else style="color: #ab0505">
                逾期{{parseInt((scope.row.getDate.getTime()-scope.row.paymentDate.getTime())/86400000)}}天后到账
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="到账" v-model="getPrice" width="500px" append-to-body style="border-radius: 20px">
      <el-form>
        <el-form-item label="实际到账金额" prop="job">
          <el-input
              v-model="getForm.accountPrice"
              placeholder="请输入到账金额"
          />
        </el-form-item>
        <el-form-item label="备注" prop="job">
          <el-input
              v-model="getForm.remark"
              placeholder="请输入备注"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleGet">到账</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="岗位清单" v-model="openExp" width="950px" append-to-body style="border-radius: 20px">
      <el-form :model="queryParams2" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="岗位" prop="job">
          <el-input
              v-model="queryParams2.job"
              placeholder="请输入岗位"
              clearable
              @keyup.enter="getPostList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getPostList">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="未结算" name="first"></el-tab-pane>
        <el-tab-pane label="已结算" name="second"></el-tab-pane>
      </el-tabs>
      <el-button type="success" @click="checks()">结算</el-button>
<!--      <el-button type="danger" @click="backs()">退回</el-button>-->
      <el-table :data="listExp" v-loading="loading2" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="实验数据编号" align="center" width="150" fixed prop="experimentId"/>
        <el-table-column label="岗位负责人" align="center" prop="job" width="150"/>
        <el-table-column label="样品编号" align="center" width="100" prop="sampleName"/>
        <el-table-column label="实验" align="center" prop="experimentName"/>
        <el-table-column label="实验时间" align="center" width="100" prop="experimentDate"/>
        <el-table-column label="价格" align="center" fixed="right" prop="jobPrice">
          <template #default="scope">
            {{scope.row.jobPrice/100}}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            {{parseInt(scope.row.expermentType/10)%10<=4?'未结算':'已结算'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button v-if="activeName=='first'" type="success" @click="check(scope.row.experimentId)">结算</el-button>
<!--            <el-button type="danger" @click="back(scope.row.experimentId)">退回</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="total2>0"
          :total="total2"
          v-model:page="queryParams2.pageNum"
          v-model:limit="queryParams2.pageSize"
          @pagination="getPostList"
      />
    </el-dialog>

    <el-dialog v-model="openAllExpe" title="实验清单" width="900" append-to-body style="border-radius: 20px">
      <el-table :data="allExpelist" v-loading="loading2" @selection-change="handleSelectionChange">
        <el-table-column label="样品编号" align="center" fixed prop="sampleName"/>
        <el-table-column label="实验名称" align="center" fixed prop="experimentName"/>
        <el-table-column label="单价（元）" align="center" prop="experimentPrice">
          <template #default="scope">
            {{scope.row.experimentPrice/100}}
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="experimentNumber"/>
        <el-table-column label="总价（元）" align="center">
          <template #default="scope">
            {{scope.row.experimentPrice*scope.row.experimentNumber/100}}
          </template>
        </el-table-column>
        <el-table-column label="岗位负责人" align="center" prop="job"/>
        <el-table-column label="价格（元）" align="center" prop="jobPrice">
          <template #default="scope">
            {{scope.row.jobPrice/100}}
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="totalAE>0"
          :total="totalAE"
          v-model:page="queryParams3.pageNum"
          v-model:limit="queryParams3.pageSize"
          @pagination="listAllExpe"
      />
    </el-dialog>

  </div>
</template>

<script setup name="Project">

import {parseTime} from "@/utils/ruoyi.js";
import {
  backPay,
  expList4, expList5, finish, getExpeByPid,
  getPay,
  listItem,
  toBack,
  toBacks,
  toCheck,
  toChecks
} from "@/api/finance/finance.js";
import {ElMessageBox, ElNotification} from "element-plus";

const { proxy } = getCurrentInstance();

const  projectList = ref([]);
const dateList = ref([]);
const open = ref(false);
const loading = ref(false);//默认应为true
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const total2= ref(0);
const title = ref("");
const paymentList=ref([]);
const pid=ref();
const activeName=ref('first');
const activeFinish=ref('first');

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    projectName: null,
    code: null
  },
  queryParams2: {
    pageNum: 1,
    pageSize: 5,
    projectId:null
  },
  queryParams3: {
    pageNum: 1,
    pageSize: 5,
    projectId:null
  },
  rules: {
  }
});

const { queryParams, form, rules,queryParams2,queryParams3 } = toRefs(data);

let t=false;

function handleFinishClick(tab){
  if (tab.props.name=='second'){
    projectList.value = dateList.value.filter(row => row.type === true);
    t=true;
    // total.value = projectList.value.length;
    loading.value = false;
  }else{
    projectList.value = dateList.value.filter(row => row.type === false);
    t=false;
    // total.value = projectList.value.length;
    loading.value = false;
  }
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(listExp => listExp.experimentId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 查询项目列表 */
function getList() {
  loading.value = true;
  listItem(queryParams.value).then(response => {
    dateList.value = response.rows
    if(t){
      projectList.value = dateList.value.filter(row => row.type === true);
    }else{
      projectList.value = dateList.value.filter(row => row.type === false);
    }
    total.value = response.total;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.code=null;
  proxy.resetForm("queryRef");
  handleQuery();
}
const isFinishPrice=ref(0);
let fFinish=false;
function handleFinish(f){
  if(fFinish){
    finish(pid.value,f).then(res=>{
      getList();
    })
  }
}
function showPayment(pay,id,finishPrice){
  isFinishPrice.value=finishPrice;
  for (let e of pay) {
    e.paymentDate=new Date(e.paymentDate);
    if (e.getDate!=null){
      e.getDate=new Date(e.getDate);
    }
  }
  paymentList.value=pay;
  pid.value=id;
  open.value=true;
  fFinish=true;
}
//到账
const getForm=ref({});
const getPrice=ref(false);
function openGetPrice(id){
  getForm.value.paymentId=id;
  getForm.value.projectId=pid.value;
  getPrice.value=true;
}

function handleGet(){
  getForm.value.accountPrice=getForm.value.accountPrice*100;
  getPay(getForm.value).then(res=>{
    if (res.code==200){
      ElNotification({
        title: '成功',
        message: '已确认到账',
        type: 'success',
      })
      for (let e of res.data) {
        e.paymentDate=new Date(e.paymentDate);
        if (e.getDate!=null){
          e.getDate=new Date(e.getDate);
        }
      }
      paymentList.value=res.data;
      getList();
      getPrice.value=false;
      getForm.value={};
    }

  })
}
function handleBack(id){
  backPay(id,pid.value).then(res=>{
    if (res.code==200){
      ElNotification({
        title: '成功',
        message: '已撤回到账',
        type: 'success',
      })
      for (let e of res.data) {
        e.paymentDate=new Date(e.paymentDate);
        if (e.getDate!=null){
          e.getDate=new Date(e.getDate);
        }
      }
      paymentList.value=res.data;
      getList();
    }
  })
}
//岗位结算详情
const openExp=ref(false);
const listExp=ref([]);
const dpid=ref();
const loading2=ref(false);

function showDetail(id){
  loading2.value=true;
  queryParams2.value.id=id;
  dpid.value=id;
  openExp.value=true;
  if (activeName.value=='first'){
    expList4(queryParams2.value).then(res=>{
      listExp.value = res.rows;
      total2.value = res.total;
      loading2.value=false;
    })
  }else{
    expList5(queryParams2.value).then(res=>{
      listExp.value = res.rows;
      total2.value = res.total;
      loading2.value=false;
    })
  }
}

function getPostList(){
  if (activeName.value=='first'){
    expList4(queryParams2.value).then(res=>{
      listExp.value = res.rows;
      total2.value = res.total;
      loading2.value=false;
    })
  }else{
    expList5(queryParams2.value).then(res=>{
      listExp.value = res.rows;
      total2.value = res.total;
      loading2.value=false;
    })
  }
}

function updateDetail(){
  queryParams2.value.projectId=dpid.value;
  loading2.value=true;
  if (activeName.value=='first'){
    expList4(queryParams2.value).then(res=>{
      listExp.value = res.rows;
      total2.value = res.total;
      loading2.value=false;
    })
  }else{
    expList5(queryParams2.value).then(res=>{
      listExp.value = res.rows;
      total2.value = res.total;
      loading2.value=false;
    })
  }
}
function check(id){
  ElMessageBox.confirm(
      '确认结算吗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type:'info',
      }
  ).then(()=>{
    toCheck(id).then((res)=>{
      ElNotification({
        title:'成功',
        message:'结算成功',
        type:'success'
      })
      updateDetail();
    })
  }).catch(()=>{
  })
}
function back(id){
  ElMessageBox.confirm(
      '确认退回吗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type:'info',
      }
  ).then(()=>{
    toBack(id).then((res)=>{
      ElNotification({
        title:'成功',
        message:'退回成功',
        type:'success'
      })
      updateDetail();
      getList();
    })
  }).catch(()=>{
  })
}
function checks(){
  ElMessageBox.confirm(
      '确认结算吗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type:'info',
      }
  ).then(()=>{
    toChecks({ids:ids.value}).then((res)=>{
      ElNotification({
        title:'成功',
        message:'结算成功',
        type:'success'
      })
      updateDetail();
    })
  }).catch(()=>{
  })
}
function backs(){
  ElMessageBox.confirm(
      '确认退回吗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type:'info',
      }
  ).then(()=>{
    toBacks({ids:ids.value}).then((res)=>{
      ElNotification({
        title:'成功',
        message:'退回成功',
        type:'success'
      })
      updateDetail();
      getList();
    })
  }).catch(()=>{
  })
}

function handleClick(name){
  queryParams2.value.pageNum=1
  queryParams2.value.projectId=dpid.value;
  loading2.value=true;
  if (name.paneName=='first'){
    expList4(queryParams2.value).then(res=>{
      listExp.value = res.rows;
      total2.value = res.total;
      loading2.value=false;
    })
  }else{
    expList5(queryParams2.value).then(res=>{
      listExp.value = res.rows;
      total2.value = res.total;
      loading2.value=false;
    })
  }
}

//展示实验详情页
const openAllExpe=ref(false);
const allExpelist=ref([]);
const totalAE=ref(0);
var apid;
function showExperiment(pid){
  apid=pid;
  listAllExpe();
}
function listAllExpe(){
  queryParams3.value.projectId=apid;
  getExpeByPid(queryParams3.value).then(res=>{
    allExpelist.value=res.rows;
    totalAE.value=res.total;
    openAllExpe.value=true;
  })
}

getList();
</script>
